CSS Peek — удобные хинты для фронтендеров

Полезное расширение для VS Code, которое показывает свойства класса при наведении на объект. Работает с HTML, React, Vue, Svelte и другими фреймворками. Также позволяет редактировать содержимое класса, не переключаясь на CSS-файл

Доступно бесплатно в маркетплейсе VS Code.

#инструменты

Для JavaScript появился ещё один движок

Создал его разработчик полностью в соло. Движок называется Brimstone и написан полностью на Rust.

Несмотря на небольшой вес, Brimstone очень быстрый и на 97% реализует спецификацию ECMAScript, что позволяет использовать его практически с любым кодом. Представляет собой виртуальную машину на основе байт-кода с современной сборкой мусора, собранную по образцу V8.

Такой движок отлично подойдёт для какого-нибудь WebView, где требуется легковесный движок. Подробнее можно прочитать на странице проекта. Там же лежит инструкция по установке.

#javascript

Кстати, пока искал информацию про Brimstone, обнаружил сайт с каталогом JavaScript-движков

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

Полезно, если есть необходимость выбирать движок для проекта.

Зоопарк движков можно изучить по ссылке: https://zoo.js.org/

#javascript

Анимация пружины и отскока на чистом CSS

Обычное для создания простых анимаций на CSS используется свойство transition с указанием какого типа движение будет: ease-in, ease-in-out, ease-out или ease. Но если нам требуется что-то не стандартное, такие варианты уже не подходят.

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

Джош Комо написал простой наглядный гайд, как пользоваться функцией linear для создания таких и других кастомных эффектов перехода. Рекомендую ознакомиться.

#фронтенд #css

Теперь можно легко (почти) создать адаптивное видео

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

Конечно, эти платформы помогают. Но при этом они не дают вам задать вертикальную и горизонтальную ориентацию одному и тому же ролику для разных экранов. А вот простой html-элемент <video> может. При этом вы можете настроить всё так, чтобы браузер выбирал нужно видео в зависимости от устройства и его экрана.

Как это сделать можно узнать в статье.

#фронтенд #ui

Это заговор масонов

React Reconciliation: скрытый механизм, управляющий компонентами

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

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

Переходите по ссылке. Там всё описано довольно понятно и интересно.

#react

Теория мёртвых веб-фреймворков

Слышали о такой? Её выдвинул Пол Кинлана в своей статье. Суть теории в том, что все новые фреймворки оказываются «мёртвыми ещё при рождении», потому что сочетание сетевых эффектов, экосистемы React и обучения LLM формирует замкнутый цикл, в котором альтернативы просто не успевают набрать критическую массу.

Причём его слова не просто взяты из воздуха, а подтверждаются исследованиями и наблюдениями за работой LLM.

Подробнее можно прочитать здесь. А в комментариях поделитесь своими мыслями — фреймворкам новым больше нет места или всё же не стоит терять надежду?

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

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

#фронтенд

Supercookie: Никто не уйдёт незамеченным

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

Использовать такой метод в своих проектах кажется довольно сомнительным занятием. Но точно стоит знать о нём, чтобы иметь возможность предотвратить такое отслеживание. Поэтому рекомендую подробнее познакомиться с библиотекой в образовательных целях.

Ссылка на репозиторий: github.com/jonasstrehle/supercookie/

Кстати, в репозитории также лежат две статьи, которыми вдохновлялся автор проекта. Их тоже стоит почитать.

#безопасность #cookie

sqlmap — удобная защита от инъекций

Этот инструмент для тестирования на проникновение автоматизирует процесс обнаружения SQL-инъекций и захвата серверов баз данных.

Он поставляется с множеством нишевых функций. В том числе снятием отпечатков с БД, выполнением команд через внеполосные соединения и так далее.

Утилита бесплатная. Опробовать можно по ссылке.

#библиотека

Для микрофронтендов появился свой аналог OpenAPI

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

Спецификация включает в себя:

— основные метаданные: название, заголовок, описание;
— ресурсы (js, css) и способы их загрузки;
— схему объекта config, которую можно указать при запуске микрофронтенда;
— схему отправки и получения сообщений микрофронтендом;
— прокси-серверы API, если они необходимы;
— советы по безопасности.

Почитать подробнее можно на странице проекта: https://open-microfrontends.org/

#opensource

Теперь мы знаем кому будет принадлежать самый горячий и неудобный котёл

Второе пришествие Shai Hulud: 132 млн загрузок в месяц, украденные токены и стёртые домашние папки

Атака продолжается!

24 ноября хакеры заразили 492 npm-пакета червём Shai Hulud, которые скачивают 132+ млн раз в месяц. Под ударом — Postman, PostHog, AsyncAPI, Zapier и ENS.

Как работает:
Устанавливаете пакет → вредонос запускается до завершения установки → получает доступ к вашей среде разработки → крадёт GitHub/npm-ключи, токены облаков, пароли и API-ключи → складывает всё в случайный GitHub-репозиторий → заражает до 100 других пакетов.

Самое опасное: если не удаётся авторизоваться в GitHub или npm, червь стирает ВСЕ файлы в вашей домашней директории.

Читайте полную новость: список всех заражённых пакетов, технические детали червя и полный чек-лист защиты.

@your_tech

XSS-уязвимость в Esbuild пережила 5 миллиардов загрузок и обошла HTML-очистку

Уязвимость появилась в 2022 году вместе с функцией escapeForHTML, которая должна была экранировать HTML-код. И она экранировала... Но не всё. Эта функция не обрабатывала двойные кавычки ("). Вместо неё необходимо было использовать escapeForAttribute. Но в код закралась ошибка, поэтому всё перепуталось.

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

Но ошибка, конечно, нелепая. Поэтому рекомендую почитать о ней подробнее.

This is JavaScript: методы объектов и контекст «this»

Полезная статья для новичков в JavaScript. С this вам так или иначе предстоит столкнуться во время разработки, поэтому нужно уметь с ним работать и понимать его. Тут вы узнаете про методы объектов и их отличия от функций, как this помогает работать с данными объекта внутри методов и получите полезные советы.

#javascript #основы

Это заслуживает, как минимум, раннего ухода домой

Производительность или качество?

Попалось обсуждение на Reddit, которое показалось интересным. Суть в том, что у автора на работе менеджеры хотят увеличить производительность в три раза с помощью ИИ, но фронтенд в таком случае превращается в спаггети-код. С одной стороны время разработки сокращается, что важно, если сроки сжатые. С другой стороны, общая кодовая база, структура кода и его качество становятся хуже и менее однородными

Что думаете по этому поводу? Как у вас в команде относятся к ИИ? А главное, как вы находите баланс между скоростью и качеством кодовой базы?

Полезная функция в Chrome Dev Tools

Не все знают, но в инструментах разработчика есть раздел CSS Overview. Он позволяет вам в одном месте и в удобном виде посмотреть какие стили используются на сайте. Есть отдельный раздел со шрифтами, цветами, медиазапросами. Отдельного внимания стоит раздел, в котором показаны не используемые CSS-правила.

Инструкция по входу в раздел на видео.

#css #chrome

Создание и деплой полнофункционального приложения для обмена сообщениями в чате

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

Все подробности в видео: https://youtu.be/MJzbJQLGehs

#фронтенд #бэкенд #видео

Нашёл для вас легковесный экстрактор схем страниц

schema-extractor полезен для преобразования сырого HTML-кода в машиночитаемый формат JSON. Он позволяет извлекать из веб-страниц структурированные данные, которые могут использовать агенты при просмотре интернета. Это может пригодиться для анализа структуры страницы, разработки ии-агентов, тестирования, автоматизация извлечения и парсинга данных в другие системы.

Весит мало, устанавливается легко. Работает на axios, cheerio и heuristics.

#инструменты #библиотека