​Введение в CSS Cascade Layers

Управление каскадом стилей- задача не из легких. Скоро в CSS появятся каскадные слои - смогут ли они решить эту проблему?

https://proglib.io/w/9f43b951

#css

​Оптимизация видео по размеру и качеству

Добавление видео в приложение может повысить вовлеченность и удовлетворенность клиентов. Но при проблемах с воспроизведением обычно происходит прямо противоположное. Разбираемся, как этого избежать: https://proglib.io/w/877f475b

#performance

3 паттерна для создания React-компонентов

Статья (англ.): https://blog.openreplay.com/3-react-component-design-patterns-you-should-know-about

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

Презентационные компоненты и компоненты-контейнеры

Презентационные компоненты отвечают только за внешний вид. Они получают данные через пропсы, выводят их и никак не зависят от других компонентов. Очень часто презентационные компоненты не имеют состояния, но также могут отслеживать какое-то состояние, связанное с интерфейсом (например, текст в поле ввода). Примеры презентационных компонентов: список элементов, поле ввода.

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

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

Провайдер

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

Пример Провайдера в React - это контекст. Мы создаем объект контекста с нужными данными (например, цветовой темой приложения), оборачиваем все приложение в провайдер этого контекста и в нужных местах связываемся с ним с помощью хука useContext, или свойства contextType, или Context.Consumer.

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

Составные компоненты

Компоненты в React могут работать в симбиозе, разделяя общее состояние. Например, компонент списка (Menu) и компоненты отдельных элементов списка (MenuItem). Вынесение элементов в отдельные компоненты может быть удобно с точки зрения передачи пропсов и структуризации кода.

Но у Menu и MenuItem есть общее состояние - активный элемент, оно должно храниться в компоненте Menu, значит, его нужно передать во все вложенные компоненты MenuItem. Об этом должен позаботиться сам компонент списка (например, с помощью React Context), тогда мы получим составной компонент (compound component).

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

#паттерны #ссылки

​Система координат на HTML и CSS

Строим графики с помощью CSS переменных: https://proglib.io/w/e9fcae0c

🧩 Задача для тех, кто хочет отвлечься от рутины и немного пошевелить извилинами (выпуск 16, задача 1)

Августин, Евдоким и Теодор планируют отправиться в гости к таинственной Урсуле, проживающей на противоположном берегу реки. Чтобы не идти с пустыми руками, мужчины прихватили с собой по коробке невероятно вкусных шоколадных пирожных с клубничным кремом... Как мужчинам перебраться на другой берег и не слопать пирожные?

Подробности: https://proglib.io/sh/KGh35uimy0

Эффект печати текста

https://proglib.io/w/0005da84

#snippets #animation

«Библиотека программиста» находится в поиске автора оригинальных статей.

Обязанности:
– Написание оригинальных статей.

Количество статей:
– 2-5 статей в месяц.

Языки:
– Python, JavaScript.

Пишите на [email protected]

​Как строить архитектуры приложений, которые позволяют не снижать скорость разработки по мере развития проекта?

💻Освойте основные паттерны проектирования и прокачайте свои навыки архитектора программного обеспечения в режиме живых занятий с опытным разработчиком-практиком.

Старт интенсива «Архитектуры и шаблоны проектирования» уже 15 февраля.

🚀После интенсива вы будете:

– Знать границы применения SOLID принципов и уметь их использовать не только в объектно-ориентированных языках.
– Писать модульные тесты на Mock-объектах.
– Уметь применять IoC контейнеры и CI.

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

Осталось 3 места до закрытия набора группы, успейте присоединиться!

Записаться сейчас со скидкой 50% можно здесь.

Промокод: SOLID50 (скидка -50%).

Распространённые заблуждения о наследовании в JavaScript

Если ты не разбираешься в прототипах, ты не понимаешь JavaScript: https://proglib.io/w/79120607

#javascript

🚄 Сравнение 6 алгоритмов сортировки: пузырьком, выбором, кучей, вставками, слиянием и быстрая

В этой статье мы начнем изучение алгоритмов сортировки, разберем 6 методов сортировки и ознакомимся с оценкой их эффективности.

https://proglib.io/sh/MleBkGR4VW

​3 лучшие React-библиотеки для создания анимации

https://proglib.io/w/79cdb8af

#react #animation

CSS-переменные для React-разработчиков

Статья (англ.): https://www.joshwcomeau.com/css/css-variables-for-react-devs/

CSS-in-JS решения позволяют писать очень гибкие стили, но не следует забывать про нативные возможности CSS. Автор статьи считает, что CSS-переменные aka кастомные свойства - это очень мощный инструмент, который иногда может переплюнуть все эти ваши JS-интерполяции.

CSS-переменные дают возможность изменять значения, а не свойства. Они декларативны, и код с ними становится короче и чище. CSS-переменные наследуются вложенными элементами, а при необходимости с ними можно легко взаимодействовать из JS-кода. Ко всему прочему, с помощью переменных можно анимировать то, что нельзя анимировать другими способами, например, градиенты (с некоторыми оговорками).

В статье рассмотрен конкретный кейс обеспечения доступности кнопки на тач-устройствах - в двух вариантах: CSS-in-JS (Styled Components) и CSS-переменные.

В целом полностью поддерживаю мнение автора, CSS-переменные - очень мощная штука, к тому же нативная.

#стили #ссылки

JavaScript для начинающих

Большой плейлист от Microsoft с короткими обучающими видео: https://proglib.io/w/05dc33f4

#video #beginners

Разные способы подключения комментариев к статическому сайту

От специальных сервисов до ручного добавления: https://proglib.io/w/2bcee018

Разбираемся с мемоизацией в JavaScript

По мере того, как наши приложения растут и начинают выполнять более тяжелые вычисления, возникает все большая потребность в скорости и оптимизации. Тут может помочь мемоизация: https://proglib.io/w/7cc4d18d

​LinkedIn профиль, который хочет видеть каждый рекрутер

Гайд для разработчиков по созданию профиля на LinkedIn: https://proglib.io/w/f877ef9f

Ты умный и любишь свою профессию?
Ищешь стабильность и высокую зарплату?
Хочешь творить будущее?
Стремишься реализовать себя в крутых проектах?
Мечтаешь гордиться результатом работы вместе с профессиональной командой?
Приходи в международную IT-компанию Noveo!
https://noveo.ru/3AHN0Gl
Ждём твоё резюме на открытые вакансии:
[email protected]
Контактное лицо в Telegram: @yuliapalkina