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

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

PHP | preg_replace preg_replace - встроенная в php функция, которая заменяет символы, попадающие под регулярное выражение, на указанную строку. С помощью нее можно, например, удалять все пробельные символы из строки или очищать номер телефона от форматирования.

HTML | Адаптивные изображения для всех В современном вебе использовать неадаптивные изображения - моветон. Тег picture, атрибуты sizes и srcset у тега img позволяют гибко решать эту проблему. В статье на примерах наглядно объясняются принципы создания респонсивных изображений. Если особой гибкости не требуется, то как минимум нужно указывать дополнительное изображение для ретины:

<src="/path/to/img.jpg" srcset="/path/to/img@2x.jpg 2x">

Оффер от Яндекса за 1 день 13 марта Яндекс проведёт One Day Offer — онлайн-встречу для фронтенд-разработчиков, на которой можно получить оффер за один день. Утром участники смогут пройти две секции с кодом, а уже вечером получить предложение о работе. Подробнее

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

JS | Деструктуризация объектов Деструктурирующее присваивание – это специальный синтаксис, который позволяет нам «распаковать» массивы или объекты в кучу переменных, так как иногда они более удобны. Деструктуризация массива

let arr = ["Ilya", "Kantor"]

// деструктурирующее присваивание 
// записывает firstName=arr[0], surname=arr[1] 
let [firstName, surname] = arr;

console.log(firstName); // Ilya
console.log(surname); // Kantor

Деструктуризация объекта

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

console.log(title); // Menu
console.log(width); // 100
console.log(height); // 200

Более сложные примеры разобраны в документации.

Искусство компонентов. Пишем карточку контакта 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 позволяет вам использовать визуальные эффекты - такие как размытие или смещение цвета фона - за элементом. Так как это применяется ко всему за элементом, чтобы увидеть эффект, вы должны сделать элемент или его фон по крайней мере частично прозрачными.