​Альтернативы Redux в 2021 году

С момента появления Redux и пика его популярности прошло уже порядочно времени. Веб-разработка не стоит на месте и появляются новые инструменты, превосходящие предыдущие. Redux не стал исключением и сегодня существуют различные инструменты и способы управления состояниями.

Вы можете использовать Redux по-старинке, а можете прочитать эту статью и открыть для себя что-то новое и, возможно, более подходящее:

https://tprg.ru/UQMs

#redux

Вертикальный слайдер

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

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

Познакомиться с проектом поближе можно тут:

https://tprg.ru/LxuI

#codepen

Расширение CSS Peeper

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

Подробнее узнать и установить можно тут:

https://tprg.ru/URBT

#css #chrome

«Тебе практика, а мне польза. Я про тебя ещё знакомым расскажу!»

Избегайте ловушки кеша при обслуживании приложения Angular

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

В этой статье вы узнаете, как избежать проблем с кешем, используя Angular:

https://tprg.ru/xRtK

#angular

​«Ваше изображение, вероятно, не декоративное»

Но если это так, то вы уверены, что у него присутствует альтернативное описание? А правильное ли оно?

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

https://tprg.ru/9cW0

#css

Лучшие практики стилизованных компонентов React

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

https://tprg.ru/6Wba

#css #react

​CSS анимация по заданной траектории

С помощью CSS можно без каких-либо сторонних инструментов создать красивую анимацию с заданной траекторией движения объектов. В этом видео вы научитесь это делать:

https://tprg.ru/gtON

#css

​Ссыл­ка для ска­чи­ва­ния

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

В этой статье вы узнаете, как работать с такими ссылками, а также бонусом, как сохранить на лету JPEG файл из WebP или AVIF формата, используя Canvas:

https://tprg.ru/JLlY

​:has в CSS — псевдокласс из будущего на примере карточки новости

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

Вадим Макеев запустил Chrome Canary с возможностью использования :has и на реальном примере продемострировал, что он позволяет делать:

https://tprg.ru/OQSi

#видео #css

​Мы думали, как сделать нашего бота ещё полезнее и удобнее и добавили сразу три новые фишки

1. Напоминания. Теперь бот может вам напомнить об ивенте, если вы на него подписаны. Выберите когда именно вам нужно напомнить — за час, за 3 дня или неделю и бот непременно даст вам знать, когда начало события или когда нужно зарегистрироваться на него.

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

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

Бот стал лучше, а вы ещё им не пользуетесь? Скорее переходите по ссылке и запустите его: https://t.me/tproger_official_bot?start=mailings

Главное не переборщить с JS

Выпадающее меню

Такое выпадающее меню можно использовать для кнопки «Поделиться» или для перехода в нужную соцсеть продукта.

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

Посмотреть и изучить код проекта можно тут:

https://tprg.ru/Qy6j

#codepen

​React Intl: интернационализируйте свои приложения React

Мы как-то уже делились с вами инструментом, который позволяет быстро делать альтернативные переводы для сайта на Vue. Сегодня мы предлагаем похожий инструмент, но уже для React, который не просто поможет сделать несколько вариантов перевода, но и настроит привычное отображение разных данных, например, даты для разных регионов.

Подробнее здесь:

https://tprg.ru/rSAE

#react

Библиотека Cleave.js

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

Подробнее можете узнать тут:

https://tprg.ru/oAjq

​Адаптивный дизайн как антипаттерн

Адаптивность бывает разной. В данном случае речь пойдёт о том, когда срабатывают не те стили при работе в узком окне браузера или горизонтальном просмотре на мобильном устройстве.

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

https://tprg.ru/Dgr9

​Ма­гия вне Хо­гварт­са: NJS

У тех, кто начинает работать с Nginx, может закипеть мозг при попытке разобраться в его работе. Это очень мощный, но сложный веб-сервер.

Эта статья призвана помочь разобраться с Nginx, используя для написания скриптов привычный большинству веб-разработчиков JavaScript:

https://tprg.ru/LWPl

#javascript #nginx

​5 популярных технологий для создания сайтов

Если только начинаете разбираться с тем, как устроена веб-разработка и хотите понять из чего состоит полноценный сайт, то в этой статье вы найдёте ответы на эти вопросы:

https://tprg.ru/gEFH

Введение в контейнерные запросы CSS

С недавних пор Контейнерные запросы поддерживаются в Chrome Canary и теперь есть возможность протестировать их и изучить непосредственно в работе. Они созданы для разработки наиболее адаптивных сайтов, позволяя компонентам самостоятельно определять размеры страницы и подстраиваться под неё.

Подробнее вы можете узнать в статье:

https://tprg.ru/Ck2K

#css

Слишком много знаний для одного человека