​: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

​Размышления о способах создания цветовых схем

Разработчики Google Chrome рассуждают на тему создания различных цветовых схем сайта наиболее эффективным и удобным способом. Посмотрите, что они предлагают:

https://tprg.ru/281i

#видео

Построение компонентов с выпадающими блоками с помощью Angular и Material CDK

Самый очевидный способ создать выпадающий блок — использовать z-index, но такая практика может сыграть с вами злую шутку, да и добавлять в 2021 z-index там, где без него можно обойтись, такое.

Есть отличный вариант реализовать такой блок с помощью Material CDK, которое можно использовать, кстати, и без Angular, но в этой статье предлагается именно такая связка.

Посмотрите, это может вам пригодиться:

https://tprg.ru/NnWY

#angular

Лучше ничего не менять от греха подальше

​Как работать с localStorage в JavaScript

Благодаря наличию веб-хранилища данные пользователя хранятся непосредственно в браузере. localStorage — это веб-хранилище, где данные хранятся бессрочно и не теряются при перезапуске браузера.

В этой статье вы создадите простой список дел, где данные будут храниться в localStorage:

https://tprg.ru/lzXr

#javascript

​Что можно положить в тег <head>

Что обычно вы помещаете в <head> при написании страницы? Само собой обязательные метаданные, ссылки на JS и CSS-файлы, заголовок страницы, так ведь?

Но на самом деле для тега <head> предусмотрено ещё множество других элементов, которые по-разному влияют на страницу.

Здесь вы можете узнать о них подробно:

https://tprg.ru/jM1K

#html