Избегайте ловушки кеша при обслуживании приложения 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

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

​Почему HTTPS так важен

Сейчас принято переводить все сайты на протокол HTTPS взамен устаревшего HTTP, так как новый более безопасный о чём и говорит буква S - Secure в аббревиатуре. Но что именно делает этот протокол более безопасным и как он помогает пользователям и владельцам сайтов?

Узнаете в этой статье:

https://tprg.ru/YJOz

Неоморфные элементы для сайта

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

Сохраните к себе в избранное, а когда понадобится вам будет достаточно скопировать нужные элементы и стили для получения мгновенного эффекта:

https://tprg.ru/6GzL

#codepen

​Совместное использование ресурсов между источниками (CORS)

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

Подробнее о CORS можете прочитать в этой статье:

https://tprg.ru/UAPx

​Обслуживание оптимизированных изображений во Vue

Загрузка изображений сильно бьёт по производительности сайта. А согласно HTTP Archive изображения составляют не 50% от полезной нагрузки веб-сайта.

Но выход из этой ситуации есть. ImageEngine в связке с Vue.js позволяют снизить нагрузку на сеть при загрузке изображений. Подробнее здесь:

https://tprg.ru/Q1UX

#vue