Обновить
512K+

JavaScript *

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

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

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

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

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

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

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

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

Читать далее

Управление подписками: много слов о потоках, отписках и утечке памяти

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

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

За основу я взял библиотеку RxJs, работающую с фреймворком Angular. Однако любителям остальных фреймворков, возможно, это тоже пригодится.

Читать далее

Как начать тестировать frontend: гайд для новичков

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

Хабр, привет. Меня зовут Рамиль Шайбаков, я фронтенд‑разработчик в СберЗдоровье. Последние несколько лет я часто собеседую кандидатов на позицию frontend‑разработчика в нашу компанию и заметил одну закономерность — у большинства специалистов нет опыта в тестировании. Причем знаниями о unit/интеграционных/e2e‑тестах, пирамиде тестирования, красно‑зелёном рефакторинге, TDD и BDD, скриншот‑тестировании и других техниках не могут похвастаться как новоиспеченные фронтенды, так и специалисты уровня Senior. Причины и аргументы у всех разные, но итог один — фронтенды часто не делают тесты.

Я решил исправить эту ситуацию и подготовил небольшой гайд, который поможет фронтенд‑разработчикам внедрить тестирование в своей компании и сделать в нем первые шаги.

Поехали

Chrome Headless против cloudflare JS challenge

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

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

Читать далее

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

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

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

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

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

Читать далее

Модальное окно на чистом CSS и JS

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

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

Читать далее

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

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

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

Читать далее

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

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

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

Читать далее

Анализ производительности с помощью Chrome DevTools

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

Когда речь идет о производительности, разработчики часто используют Lighthouse, Perfbuddy или аналогичные инструменты анализа производительности. Но когда целевой сайт имеет защиту от ботов, получить информацию не так просто. В этой статье блога мы сосредоточимся на том, где искать признаки узких мест в производительности с помощью Chrome Devtools.

Читать далее

Найди себя в 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 камеры с браузером и что из этого получилось.

Читать далее

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

Общие шаблоны и нюансы использования React Query

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

Из-за своей гибкой парадигмы React имеет несколько подходов проектирования проекта. Решения, которые мы принимаем на этапе проектирования и архитектуры проекта, могут либо сократить временные затраты на разработку простого надежного решения, либо затруднить её из-за усложнения реализации.

Одним из простых в реализации, но иногда сложных в использовании инструментов является react-query — мощная библиотека для асинхронного управления состоянием. Простота реализации делает его желанным выбором для написания логики состояния компонентов.

Читать далее

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

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

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

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

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

Читать далее

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

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


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


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


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


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


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

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

React, всплывающие подсказки (tooltips), для самых маленьких

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

Во множестве проектов web разработки для улучшения пользовательского опыта используются всплывающие подсказки - tooltips. В статье рассматривается создание переиспользуемого и гибко настраиваемого React компонента для отображения таких всплывающих подсказок.

К статье

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

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

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

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

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

Принципы SOLID на JS, теперь точно простым языком, но не очень коротко

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

SOLID — универсальный набор принципов разработки поддерживаемого программного обеспечения. В данной статье я попытался разъяснить свое понимание принципов SOLID в отношении языка JavaScript: особенности реализации, некоторые синтаксические конструкции и, конечно, примеры из жизни. Если вам стало интересно, то прошу под кат.

Читать далее

Сквозное тестирование DApp в связке с расширением Metamask

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

Всем привет! На связи снова QA Engineer Илья из компании Tourmaline Core и это вторая часть статьи про тестирование DApp. 

В прошлый раз я рассказывал о том, как можно тестировать подключение и работоспособность блокчейн-приложения через WalletConnect с использованием мобильного эмулятора и библиотеки Detox. На этот раз я хочу рассмотреть процесс тестирования с другой стороны, а именно через расширение браузера при помощи инструмента Synpress. Я расскажу, как работает этот инструмент, как его настроить и запускать тесты.

Читать далее