Обновить
246.16

JavaScript *

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

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

Что нового завезли в DevTools (Chrome 111)

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

Совсем недавно вышел Chrome 111 и принёс не только исправление старых ошибок, но и добавление новых, а также приятные фичи в DevTools, о которых мы с вами сейчас и узнаем.

Читать далее

Solana смарт-контракты на Rust для самых маленьких

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

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

Читать далее

VueEnt — сложные формы на Vue и не только

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

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

Читать далее

Пишем умный поиск по коду с Open AI

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

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

Читать далее

Структуры данных: связный список

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

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

Связный список

Полное руководство по Remix. Часть 1

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


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


В этой серии статей я расскажу вам о Remix — новом фреймворке для создания клиент-серверных веб-приложений на JavaScript (точнее, на React) со встроенной поддержкой TypeScript.


Remix позволяет разрабатывать так называемые PESPA (Progressive Enhancement Single Page Apps — одностраничные приложения с возможностью прогрессивного улучшения). Это означает следующее:


  • почти весь код приложения "живет" на сервере;
  • приложение остается функциональным даже при отсутствии JS;
  • JS используется только для прогрессивного улучшения UX (User Experience — пользовательский опыт).

Подробнее о PESPA и других архитектурах веб-приложений можно почитать здесь.


Очевидно, что разработчики Remix вдохновлялись Next.js и Svelte.


К слову, здесь вы найдете полное руководство по Next.js.


В первой части мы пройдемся по руководствам из официальной документации, во второй — более подробно рассмотрим возможности, предоставляемые Remix.


Это часть номер раз.


Часть номер два.

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

Что нового в Lighthouse 10

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

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

Lighthouse 10 доступен в командной строке через npm и в Chrome Canary. В ближайшие недели он появится в стабильном Chrome в Chrome 112 и в PageSpeed Insights.

Читать далее

Как мы запускали SSP-систему, боролись с высокими нагрузками и прокачивали навыки

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

В этот раз к нам пришел клиент, желавший запустить собственную SSP (Supply-Side Platform). Это система, которая позволяет владельцам отдельных сайтов или целых сетей продавать рекламные места и получать доход от размещения объявлений. У клиента уже был реализован MVP системы, но оставалось еще много работы.

Меня зовут Сергей Дербуш, я архитектор в компании «СмартАп Технолоджи». Расскажу о том, что мы доделывали, чтобы система заработала на полную, и как это бустануло навыки всей команды.

Читать далее

В Ruby появилась поддержка WebAssemblу: что это значит?

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


С выпуском версии 3.2 Ruby пополнил список языков программирования, поддерживающих WebAssembly. Небольшое на первый взгляд обновление может стать самым значительным изменением языка со времён Rails, так как теперь разработчики смогут работать не только с бэкендом. После портирования кода на WebAssembly его можно будет запускать где и как угодно — на фронтенде, встроенных устройствах, как бессерверные функции, вместо контейнеров или в граничных вычислениях. WebAssembly может превратить Ruby в универсальный язык программирования. Подробности под катом, а практика в вебе — на нашем курсе по Fullstack-разработке на Python.

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

Планировщик задач: не замораживаем вкладку при открытии страницы

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

Современные сайты — это сложные проекты, требующие много времени на обработку JavaScript. А современные пользователи — это требовательные люди, готовые убежать к конкуренту при ощущении «что-то сайт подтормаживает». Такое ощущение у пользователя может вызываться большим Total Blocking Time, когда он подолгу не может взаимодействовать со страницей.

Что в такой ситуации делать? На нашей конференции HolyJS Виктор Хомяков из Яндекса рассказал о том, как там делали инициализацию скриптов на странице поиска более дружественной к человеку и не блокирующей UI. А также о том, как и вам уменьшить TBT, не ухудшая другие показатели.

Доклад понравился зрителям, поэтому теперь для Хабра мы сделали текстовую версию. Далее повествование идёт от лица Виктора.

Читать далее

Пишем собственный WYSIWYG редактор на основе веб-компонентов и textarea. Часть 1

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

Всем привет, последние пару месяцев я активно изучаю тему веб‑компонентов, собираю и нарабатываю опыт, а затем делюсь своими наработками с другими с целью обменяться опытом, получит новый опыт, фидбек и понять куда двигается разработка в вебе и шагать дальше за новым опытом. Все ниже изложенное не является инструкцией как делать нужно, а является примером того, как сделать возможно на текущий момент в 2023 году, у меня уже набрался небольшой опыт (8 публикаций и 3 веб‑компонента на гитхабе) и я решился попробовать сделать что‑то серьезнее чем просто очередную реактивную кнопку или лайки, в первой части моей публикации я проведу вас по MVP веб‑компонента wc-wisywig, немного затронем философию семантики, браузерные API и обменяемся опытом, потестим HTML5 теги в статье на хабре. Для нетерпеливых сразу вот ссылка на демо и git репозиторий. Остальных ждет техничесий лонгрид, прошу под кат)

Читать далее

3D-сердце на Three.js

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

Поехали

Chrome Headless против cloudflare JS challenge

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

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

Читать далее

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

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

Читать далее

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