Frontender Libs - обзор библиотек JS / CSS

Искусство компонентов. Пишем карточку контакта Facebook Messenger Компонент, который пиксель-в-пиксель по макету может быстро перестать работать, когда столкнётся с реальным контентом настоящего проекта. В статье на примере простой карточки контакта показывается как много нюансов разметки и стилей может появится при разработке компонента.

JS | Guess.js - предсказываем поведение пользователя Guess.js использует технику, предиктивной предварительной выборки. Используя данные из источника аналитики, такого как Google Analytics, Guess.js позволяет веб-приложениям предварительно загружать ресурсы только тогда, когда они могут понадобиться, учитывая поведение пользователя. Например, есть веб-сайт с тремя страницами. Из Google Analytics мы знаем, что пользователь посетит страницу «О нас» с главной страницы с вероятностью 95%, а вероятность перейти на страницу контактов - только 5%. Пока пользователь находится на главной странице, мы можем загрузить все ресурсы со страницы «О нас», чтобы последующий переход был максимально быстрый. Поддерживает работу со статичными сайтами, gatsby, next.js и nuxt.js

PHP | Plates - native php templates Plates - это шаблонизатор для PHP, не привязанный к какому либо фреймворку. В отличие от таких популярных шаблонизаторов как Twig или Laravel Blade, Plates использует обычный PHP и не заставляет Вас учить новый язык.

Шаблоны для верстальщика — канал на котором Вы найдете шаблоны, которые помогут прокачать Ваш навык вёрстки и пополнить Ваше портфолио реальными примерами. Подписывайтесь 👈

CSS | backdrop-filter, фильтры второго уровня backdrop-filter позволяет вам использовать визуальные эффекты - такие как размытие или смещение цвета фона - за элементом. Так как это применяется ко всему за элементом, чтобы увидеть эффект, вы должны сделать элемент или его фон по крайней мере частично прозрачными.

PHP | Local PHP Security Checker Local PHP Security Checker - это консольное приложение, которое проверяет, не зависит ли ваше приложение от пакетов с известными проблемами безопасности. В качестве базы известных уязвимостей используется GitHub репозиторий https://github.com/FriendsOfPHP/security-advisories

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

PHP | Работа с ZIP архивами Для работы с ZIP архивами в PHP есть класс ZipArchive. Этот класс позволяет создавать архивы, читать их, извлекать из них файлы, устанавливать пароль и тд.

Улучшение производительности сайта, Perceived Performance Субъективное восприятие скорости работы сайта и его реальная скорость могут не совпадать, статья рассказывает о приёмах увеличивающих производительность, использование скелетонов, Optimistic Updates и другие технические и психологические средства увеличения производительности.

JS | Отслеживание высоты экрана на iOS Сделать блок на высотой на весь экран довольно просто,

height: 100vh

Но это не работает для браузера Safari на iOS, его адресная строка сверху и панель кнопок снизу не учитываются при расчете высоты экрана и блок высотой 100vh окажется под кнопками, для решения этой проблемы поможет небольшой скрипт получающий высоту экрана и записывающий её в css переменную.

Шаблоны проектирования "банды четырёх (GoF)" Порождающие паттерны — это паттерны, которые абстрагируют процесс порождения классов и объектов. Структурные паттерны - рассматривает, как классы и объекты образуют более крупные структуры - более сложные по характеру классы и объекты. Поведенческие паттерны - они определяют алгоритмы и взаимодействие между классами и объектами, то есть их поведение. В статье собраны описания работы всех этих паттернов с примерами реализации.

GRASP паттерны проектирования GRASP (General Responsibility Assignment Software Patterns) — шаблоны проектирования, используемые для решения общих задач по назначению обязанностей классам и объектам. Известно девять GRAPS шаблонов. Эти паттерны не имеют выраженной структуры, четкой области применения и конкретной решаемой проблемы, а лишь представляют собой обобщенные подходы/рекомендации/принципы, используемые при проектировании дизайна системы. Шаблоны включают в себя: - Information Expert (Информационные эксперт) ; - Creator (Создатель) ; - Controller (Контроллер) ; - Low Coupling (Слабая связанность) ; - High Cohesion (Высокая сцепленность) ; - Pure Fabrication (Чистая выдумка или чистое синтезирование) ; - Indirection (Посредник) ; - Protected Variations (Сокрытие реализации или защищенные изменения) ; - Polymorphism (Полиморфизм). Статья живым языком с примерами подробно рассказывает о всех этих шаблонах.

JS | Паттерн "Декоратор" Декоратор — это средство, которое позволяет обернуть одну функцию другой и расширить ее возможности. Вы «декорируете» существующий код, обернув его другим кодом. Этот прием известен всем, кто знаком с композицией функций или функциями высшего порядка. Статья рассказывает зачем нужны и как реализовать декораторы функций, классов, свойств класса и поля класса