Обновить
256K+

JavaScript *

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

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

Chrome Headless против cloudflare JS challenge

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

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

Читать далее

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

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

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

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

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

Читать далее

Как правила линтинга влияют на архитектуру приложения

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

В eslint есть одно простое, но мощное правило, которое поможет вам в поддержании архитектуры приложения.

Читать далее

Изучаем mergeMap, switchMap, concatMap и exhaustMap

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

Я Angular разработчик. Это моя первая статья и таких я собираюсь написать много. Пришла эта идея мне в голову потому что иногда, пытаясь найти какую-то информацию в интернете о принципах работы какого-либо инструмента разработки, я не нахожу абсолютно ничего. Это либо ненавистные обожаемые мною доки, в которых написаны очень краткие принципы работы для знающих людей, либо stackoverflow, где кто-то норовит написать кучу слов ни о чём или без практической составляющей, либо просто статьи, не отражающие сути. Но иногда можно наткнуться на знающего человека, который за одну минуту объяснит тебе всю суть и от счастья хочется прыгать. Я решил писать обо всех таких моментах, которые мне очень сложно давались в понимании из-за отсутствия адекватной информации или моей криворукости. Я буду писать подобные статьи прежде всего для себя и если кому-то это поможет - я буду безумно рад, что какому-нибудь камраду не пришлось долго мучиться и понимать смысл того или иного инструмента для разработки. Статьи будут максимально краткими и по делу. Погнали!

Читать далее

Найди себя в React

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

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

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

Пройти тест

Разработка клиент-серверного приложения с помощью Next.js и TypeScript. Часть 2. Разработка клиента

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


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


В этой серии из 2 статей-туториалов мы с вами продолжаем разрабатывать клиент-серверное (фуллстек — fullstack) приложение с помощью Next.js и TypeScript.



  1. Наше приложение будет представлять собой блог — относительно полноценную платформу для публикации, редактирования и удаления постов.
  2. Мы реализовали собственный сервис аутентификации на основе JSON Web Tokens и HTTP-куки.
  3. Данные пользователей и постов будут храниться в реляционной базе данных SQLite.

В первом туториале мы подготовили и настроили проект, а также реализовали серверную часть приложения с помощью интерфейса роутов (API Routes), во втором — разработаем клиента и проверим работоспособность приложения.


Обратите внимание: данный туториал рассчитан на разработчиков, которые имеют некоторый опыт работы с React и Node.js.


Для тех, кого интересует только код, вот соответствующий репозиторий.


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

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

Удаленный доступ к IP камерам. Часть 3. HEVC и web

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

HEVC (High Efficiency Video Coding — высокоэффективное кодирование видеоизображений), также известный как H.265, это видеокодек, широко используемый, в том числе, в системах видеонаблюдения. До недавнего времени веб браузеры практически не поддерживали этот формат. Но ситуация изменилась с выходом браузеров Chrome/Chromium версии 106. Это событие показалось мне достойным упоминания на Хабре, и в этой части статьи я расскажу, почему поддержка HEVC важна, о своих попытках подружить IP камеры с браузером и что из этого получилось.

Читать далее

Как на практике работать над перфомансом веб-приложения: опыт Авто.ру

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

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

Поэтому на нашей конференции HolyJS Наталья Стусь поделилась тем, как выглядела работа над производительностью не в «вакууме», а конкретно в случае Авто.ру. Конечно, раз всё индивидуально, вы не сможете тут же сделать всё в своём проекте «точно так же». Но вот извлечь какие-то полезные принципы и понять, на что обратить внимание, вполне можно. Участникам конференции доклад понравился, и теперь для Хабра мы сделали его текстовую версию (а для тех, кто предпочитает видео, доступна запись).

Далее повествование — от лица Натальи.

Читать далее

Топ рекомендаций по Core Web Vitals на 2023 год

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


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


Представляю вашему вниманию перевод этой замечательной статьи, представляющей собой коллекцию лучших практик, которые по мнению команды Chrome DevRel являются наиболее эффективными способами улучшения показателей Core Web Vitals.


Core Web Vitals — это часть метрик Web Vitals, используемых для оценки веб-страниц и включенных во все инструменты Google. Владельцы сайтов должны учитывать эти метрики. Каждый показатель Core Web Vitals представляет собой отдельный аспект опыта взаимодействия пользователя с сайтом, измеряемый в полевых условиях и отражающий реальные действия по достижению критически важного результата, ориентированного на пользователя.


Web Vitals — это инициатива Google, цель которой — предоставить единое руководство по сигналам качества, необходимым для обеспечения хорошего взаимодействия с пользователем в Интернете (источник).


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

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

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

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

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

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

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

Понять TypeScript c помощью теории множеств

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

Я пишу на TS уже довольно давно. Но некоторые вопросы все еще сбивают меня с толку: что такое never, и почему он так странно себя ведет? Чем отличаются any и unknown? Почему const x: {} = true — не ошибка?

Оказывается, если перевести TS на язык теории множеств, всё встанет на свои места!

Читать далее

JavaScript: заметка об операторе конвейера

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


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


В этой небольшой заметке я хочу рассказать вам об одном интересном предложении по дальнейшему совершенствованию всеми нами любого JavaScript, а именно: об операторе конвейера (pipe operator) |>.


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


Если вам это интересно, прошу под кат.

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

Техподдержка: как научиться жить без Jira

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

Привет! Меня зовут Савр, я работаю инженером технической поддержки Arenadata. В прошлом году нам, как и многим другим компаниям, использовавшим зарубежное ПО, пришлось переходить на российские аналоги. В частности, с болью в сердце мы отказались от Jira Service Management (далее SM) — нашей системы управления обращениями заказчиков и основного инструмента службы поддержки. Мы были вынуждены перейти на российскую разработку SimpleOne.

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

Искусственный интеллект как React-разработчик

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


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


Представляю вашему вниманию перевод этой замечательной статьи, в которой автор просит ChatGPT разработать компонент модального окна на React.


ChatGPT — это чат-бот с искусственным интеллектом, разработанный компанией OpenAI и способный работать в диалоговом режиме, поддерживающий запросы на естественных языках. ChatGPT — большая языковая модель, для тренировки которой использовались методы обучения с учителем и обучения с подкреплением. Чат-бот основывается на другой языковой модели от OpenAI GPT-3.5 — улучшенной версии модели GPT-3.


ChatGPT был запущен 30 ноября 2022 года и привлек внимание своими широкими возможностями: написание кода, создание текстов, возможности перевода, получения точных ответов и использование контекста диалога для ответов, хотя его фактическая точность подверглась критике (источник — Википедия).


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

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

Основные приемы работы с Canvas [Part 2]

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

Привет! Мы продолжаем цикл статей по базовым принципам работы с canvas. Сегодня мы рассмотрим L-системы в качестве примера для создания различных интересных визуализаций.

Так что же такое L-ситемы? L-системы (или системы Линденмайера) — это набор простых правил, которые используются для моделирования роста водорослей (и не только), созданные венгерским биологом Аристидом Линденмайером в 1968 году.

Читать далее

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читать далее