Веб-страница
22.1K subscribers
2.18K photos
561 videos
2 files
4.46K links
Всё по фронтенду, бэкенду и девопсу в одном месте

Разместить рекламу: @tproger_sales_bot

Правила общения: https://tprg.ru/rules

Другие каналы: @tproger_channels

Сайт: https://tprg.ru/site

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
Такого специалиста не каждая компания себе может позволить
This media is not supported in your browser
VIEW IN TELEGRAM
Хамелеон

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

Как это реализовано можно посмотреть тут:

https://tprg.ru/gjL8

#codepen
​Учебное пособие по Giphy API

В этом руководстве вы научитесь пользовать API Giphy и сможете создать своё React-приложение, которое сможет генерировать анимированный тексты.

По ссылке вы найдёте как текстовую версию, так и видеоруководство:

https://tprg.ru/iQGT

#react
Ключевое слово static в PHP

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

В этой статье рассказывается, как правильно применять ключевое слово static в различных ситуациях:

https://tprg.ru/6dFM

#php
This media is not supported in your browser
VIEW IN TELEGRAM
Библиотека Paralax.js

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

Подробнее тут:

https://tprg.ru/QB7O

#библиотека
А потом немного сдвинул окно и вся вёрстка уплыла
​NotebookJS: JavaScript и D3 в Jupyter Notebook

Для того, чтобы добавить JavaScript в Notebook на Python необходимо применять весьма сложный код шаблонов. При этом ещё и API для передачи данных отличается для Python и JavaScript. Но эту проблему призвана решить специальная библиотека, которая называется notebookJS.

Подробнее о ней читайте в статье:

https://tprg.ru/rhYA

#javascript #python
Что такое Core Web Vitals

Вы, вероятно, уже слышали о Core Web Vitals? Это факторы оценки сайта от Google. От них между прочим зависит как именно будет ранжироваться ваш сайт и многое другое.

В этой статье подробно рассказывается, как работает Core Web Vitals и как теперь с этим жить:

https://tprg.ru/2ciU
Соотношение сторон в CSS

Изображения — важная составляющая красивого сайта. Правильно расположить изображение и настроить его размеры можно различными способами. Обычно, для заполнения блока картинкой можно воспользоваться object-fit: cover, но это не лучшее решение, потому что в некоторых ситуациях картинка будет просто плохо выглядеть.

Сегодня есть возможность использовать aspect-ratio и вот об подробнее расскажет автор статьи:

https://tprg.ru/ZIMt

#css
​Как обеспечить авторизованный доступ к видеоконтенту

Представьте, что вы договорились с правообладателем на размещение у себя на сайте определённого видеоконтента, который должен быть доступен только авторизованным пользователям. Что делать? Как разграничить доступность видео?

Существуют различных решения этой задачи. О них рассказывает СTO видеоплатформы Kinescope Кирилл Шваков:

https://tprg.ru/5zFs
Паттерны доступности зуммирования изображений

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

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

https://tprg.ru/nFVy
Библиотека Video.js

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

https://tprg.ru/Vo6K

#библиотека
​Не вглубь, а вширь. Композиция против реальности в React

Эта статья на наглядном примере объясняет насколько важно использовать принцип повторного использования в компонентах React, а также какие последствия могут возникнуть в случае отказа от него. Рекомендуем к прочтению.

https://tprg.ru/ztkM

#react
​Основы Angular: привязка стилей в Angular с ngStyle

Если вы только начинаете работать с Angular, то эта статья вам придётся кстати. Здесь автор показывает, как работать со стилями в компонентах Angular и как использовать директиву ngStyle:

https://tprg.ru/q43u

#angular
А вы ставите точку с запятой в JS?
Пишем простейший GitHub Action на TypeScript

GitHub Actions позволяет настраивать выполнение определённых процессов при срабатывании триггеров, например push, внешнего события и так далее.

Статья в первую очередь для тех, кто ещё не работал с GitHub Actions, но хочет попробовать. Хотя и опытным разработчикам некоторые вещи могут оказаться полезными.

https://tprg.ru/jEUe

#typescript
​Самоучка из Индии изучил фронтенд на телефоне

Стыдиться собственной лени или удивляться упорству парня — каждый решит сам. Но факт остаётся фактом, молодой человек сделал себе рабочее место из мобильного телефона и подключённой к нему клавиатуры.

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

https://tprg.ru/2J54

#новости
Что почитать: Дуглас Крокфорд «Как устроен JavaScript»

Эта книга подойдёт опытным разработчикам, которые уже давно работают с JavaScript, но хотят ещё больше усовершенствовать свои навыки. Здесь автор рассказывает о множестве нюансов, фишек и необычных методах языка в приятной подаче.

#книги
Крутой редактор градиента для CSS

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

Попробовать можете тут:

https://tprg.ru/jg54

#css #фронтенд