​Tailwind за 100 секунд

Что такое Tailwind, зачем он нужен и как применяется — за 100 секунд расскажет это видео:

https://tprg.ru/opGH

#видео #tailwind

Никогда не знаешь, что может пригодиться

​Расширение для просмотра компоновки сайта

Instant Wireframe — это расширение для Google Chrome, которое покажет вам, как именно скомпонованы блоки на сайте. Это пригодится дизайнерам, а также начинающим фронтенд-разработчикам.

Скачать можно тут:

https://tprg.ru/1snb

#фронтенд

​API для фронтенд-разработки

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

https://tprg.ru/PkmG

#фронтенд

​Empire of Code — изучение JavaScript и Python с помощью игры

В игре вам нужно выбрать одну из сторон — JS или Python-разработчиков. После небольшого обучения вы сможете построить свою базу, собрать войска и сразиться с соперником в режиме стратегии.

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

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

https://empireofcode.com/

Lottie for Web

С помощью библиотеки Lottie вы сможете экспортировать анимацию из Adobe After Effects прямо на ваш сайт без каких-либо сложностей.

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

https://tprg.ru/bTBz

#библиотека

А какой ваш любимый ЯП — HTML или CSS?

​Как отменить последний коммит

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

https://tprg.ru/tAzs

#git

Библиотека React-Motion

С помощью библиотеки React-Motion для React вы без труда сможете создать различную анимацию. От вас требуется минимум действий — библиотека берёт на себя всю работу, оставляя вам возможность донастроить эффекты под себя.

Подробнее:

https://tprg.ru/srIi

#библиотека

​Меньше абсолютного позиционирования в современном CSS

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

Ахмад Шадид поделился альтернативными способами позиционирования для различных ситуаций:

https://tprg.ru/3FSf

#css

​20 полезных однострочников на JavaScript

Подборка однострочников для самых разных задач. От значений cookie до прокрутки страницы:

https://tprg.ru/yswn

#javascript

Сложный градиент с эффектом зернистости просто

Использование «шума» в некоторых случаях помогает сделать изображение более выразительным. В этом руководстве вы узнаёте всё, что нужно для добавления градиенту эффекта зерна:

https://tprg.ru/Olq5

#css

​Организация таблиц стилей

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

https://tprg.ru/HLJq

#css

​Создание компонента с разделённой кнопкой

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

По ссылке также доступна видеоверсия руководства:

https://tprg.ru/pAfC

​Да кто такой этот ваш DevOps?!

https://t.me/ithumor/6315

​Создание красивых теней в CSS

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

https://tprg.ru/x94a

#css

Слайдер с пингвином

Забавный codepen-проект, где слайдер выполнен в виде перекатывающегося пингвина. Интересной особенностью проекта является использования браузерных префиксов для стилизации.

Подробнее:

https://tprg.ru/3pG0

#codepen

​Тетрис на JavaScript

Подробное руководство по созданию тетриса на JavaScript с разбором современных возможностей языка:

https://tprg.ru/7j98

#javascript #gamedev

Я что-то нажал и всё сломалось

Переход от сплошного текста к вырезанному при скролле

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

https://tprg.ru/F812

#фронтенд #css