🧰 Внутреннее представление и оптимизации строк в JavaScript-движке V8

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

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

👉 Читать

Вы можете использовать состояние элемента формы и многослойные фоны для создания индикаторов состояния ввода 😎

input:valid { --valid: 1; }
input {
    background: var(--bg) padding-box, ...,
    var(--valid-bg) calc((1 - var(--valid)) * 100cqi) 0 /
    100% 100% border-box;
}

🤏 Хитрость в том, чтобы накладывать фоны с помощью background-clip, оставляя место для границы. Применение прозрачной границы создает пространство для перехода многослойного фона.

☑️Затем мы можем использовать кастомные свойства, чтобы указать background-position каждого слоя.

☑️По умолчанию слои для валидного и невалидного состояний расположены за пределами ограничивающей рамки. Но когда одно из этих состояний активно, слой фона переходит в позицию 0 0.

@media (prefers-reduced-motion: no-preference) {
    input { transition: background-position: 0.5s; }
}

➡️ Поиграть можно здесь

#css #tip by Jhey

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

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

👉Опрос тут👈

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

Вскоре после этого появилась команда GitHub Next с целым семейством шрифтов Monaspace. Это новая система типов, которая совершенствует современное состояние отображения кода на экране.

💬 Как вам?

🔥 — огонь
🤔 — да как-то пофиг на шрифт

🤔 Нужно ли во фронтенде знать алгоритмы как в бэкенд-разработке?

Юра Михин из Злых марсиан рассказывает, как они (алгоритмы) помогли в разработке плагина Figma Polychrom, чтобы интерфейс работал гладко, не зависая при работе с большими древовидными структурами данных.

Одним словом, ответ на вопрос зависит от многих «если», но их знание и понимание точно не будет лишним для любого фронтендера.

👨‍🏫 Promises Training — проект, призванный помочь фронтенд-разработчику углубить свои знания о промисах в Javascript.

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

npm create promises-training@latest

🤔 Webpack vs esbuild: уже можно использовать в проде?

Фронтенд-архитектор Дмитрий Казаков делится опытом использования esbuild вместо Webpack для коммерческих проектов.

📌 В статье подробно описаны различные аспекты работы с esbuild, включая:

☑️ Базовые возможности esbuild без плагинов
☑️ Интеграция с Browserslist
☑️ Обработка содержимого файлов и __dirname
☑️ CSS Modules и Sass
☑️ Вставка ссылок на ресурсы в HTML-файлы
☑️ Сжатие файлов в gzip/brotli
☑️ Автоматический полифиллинг
☑️ Анализ размера бандлов
☑️ Разбиение кода на чанки

🤩 15 полезных сайтов, которые упростят вашу работу и не только: подборка для фронтенд-разработчика

✹ Визуализация регулярных выражений JavaScript
✹ Документация для разработчиков: онлайн + офлайн
✹ cdnjs: поиск библиотек с открытым исходным кодом
✹ Фотосток с огромной коллекцией изображений
✹ Интеллектуальное сжатие WebP, PNG и JPEG
✹ Удаление фона изображения
✹ Создание красивых изображений с исходным кодом
✹ Подбор палитры цветов для разработки дизайна
✹ Тестирование и демонстрация сниппетов на основе HTML, CSS и JavaScript
✹ Иконки с открытым исходным кодом
✹ Проверка совместимости CSS и JavaScript в различных популярных браузерах
✹ Создание файла README
✹ Проверка производительности сайта
✹ Редактирование фотографий
✹ Подборка иллюстраций без лицензии

👉 Читайте подробнее на Medium или в PDF

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

➡️ Поиграть можно здесь

#css #tip by Shripal Soni

🔥 Несколько уроков в курсе «‎CSS для JavaScript-разработчиков» от Josh W. Comeau можно изучить бесплатно

🤫 Воспринимайте это как возможность изучить какую-то концепцию в сжатые сроки:

👨‍💻 CSS Variables
👨‍💻 Variable Fragments
👨‍💻 Магия Calc